import styled from 'styled-components'
import border from '../styled/border'
const HeaderContainer = styled.div `
        padding: 0.136rem 0.168rem 0;
        background: #2e59e6; 
        display:flex;
        flex-direction:column;
        .backHome{
            h1{
                i{
                    color:#fff;
                    font-size:0.3rem;
                    font-weight:100;
                }
            }
        }
        .titleIcon{
            display:flex;
            padding-top: 0.09rem;
            padding-bottom: 0.16rem;
            .icon{
                width:0.46rem;
                padding:0.03rem;
                background:#fff;
                border-radius: 50%;
                box-shadow: rgb(255, 255, 255) 0px 0px 4.0000124999999995px;
                img{
                    border-radius: 50%;
                    width:100%;
                }
            }
            .content{
                margin-left:0.15rem;
                flex:1;
                h1{
                    font-size: 0.22rem;
                    line-height: 0.25rem;
                    color:#fff;
                    font-weight:700;
                    margin-bottom: 0.04rem;
                    span{
                        padding: 0 0.04rem 0 0.05rem;
                        background: #fff;
                        height: 16.0000125px;
                        line-height: 16.5px;
                        padding-right: 4.0000124999999995px;
                        padding-left: 4.9999875px;
                        border-top-left-radius: 4.0000124999999995px;
                        border-top-right-radius: 4.0000124999999995px;
                        border-bottom-right-radius: 4.0000124999999995px;
                        border-bottom-left-radius: 4.0000124999999995px;
                        font-size: 12px;
                        margin-left: 12px;
                        font-weight: 600;
                        color: #da3800;
                    }
                    
                }
                
                p{
                    height: 0.16rem;
                    font-size: 0.12rem;
                    line-height: 0.16rem;
                    color:#fff;
                    font-weight:400;
                }
            }
            .label{
                display:flex;
                flex-direction:column;
                justify-content:center;
                span{
                    font-weight: 500;
                    color: #fff;
                    background: #ffaf40;
                    padding:0.03rem 0.1rem;
                    font-size:0.12rem;
                    border-radius:0.04rem;
                        }
                    }
                }
        }
`

const DetailListContainer = border(
    styled.div `
    height:100%;
    background:#fff;
    ul{
        display:flex;
        flex-direction:column;
        margin: 0 0.16rem;
        li{
            border-bottom:1px solid #eee;
            padding:0.16rem 0;
            h1{
                font-size: 0.16rem;
                line-height: 0.24rem;
                margin-bottom: 0.07rem;
                font-weight: 600;
                color: #2f3033;
            }
            .context{
                display:flex;
                .icon{
                    display:flex;
                    .top{
                        display:block;
                        font-size:0.12rem;
                        padding:0.03rem 0.05rem;
                        line-height:0.14rem;
                        height:0.19rem;
                        background: #2e59e6;
                        border-radius:0.048rem;
                        color:#fff;
                        margin-right:0.1rem;
                        margin-top:0.03rem;
                    }
                    i{
                        padding-top:0.02rem;
                        display:block;
                        width:0.18rem;
                        height:0.18rem;
                        margin-right: 0.1rem;
                        img{
                            width:100%;
                            border-radius:50%;
                        }
                    }
                    b{
                        padding:0.03rem 0.05rem;
                        font-weight: 400;
                        color: #60636e;
                        font-size:0.13rem;
                        
                    }
                }
                .time{
                    flex:1;
                    display:flex;
                    align-items:center;
                    span{
                        display:block;
                        font-size: 0.12rem;
                        color: #d7dae0;
                        margin-left:0.1rem;
                    }
                }
                .like{
                    span{
                        font-size:0.1rem;
                        line-height:0.1rem;
                        color: #b2b5bf;
                        margin-left:0.05rem;
                    }
                    i{
                        font-size:0.1rem;
                        line-height:0.1rem;
                        color: #b2b5bf;
                        margin-left:0.03rem;
                    }
                }
            }
        }
    }
`
)
const ListNavContainer = styled.div `
    background:#fff;
    .active{
        font-weight:600;
        color:#000;
        position:relative;
        ::after{
            position:absolute;
            left:20%;
            height:0.03rem;
            bottom: 0rem;
            /* bottom:0.05rem; */
            width:60%;
            background:blue;   
            content:''; 
        }
       
    }
    ul{
        height:0.4rem;
        display:flex;
        border-bottom:1px solid #eee;
        li{
            line-height:0.38rem;
            padding:0 0.1rem;
            color: #b2b5bf;
        }
    }
`


export {
    HeaderContainer,
    DetailListContainer,
    ListNavContainer,
    
}